<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS3手风琴</title>
	<style>
		.box{ width:  1000px; height: 450px; margin:100px auto; overflow: hidden;}
		.box div{ width: 10%;  float: left; transition: all 1s;overflow: hidden;}
		 img{  width: 960px; cursor: pointer;}
		.box:hover div{ width: 5%; }
		.box div:hover{ width: 55%; }
	</style>
</head>
<body>
	<div class="box">
		<div class="first"><img src="img/1.png" alt=""></div>
		<div><img src="img/2.png" alt=""></div>
		<div><img src="img/3.png" alt=""></div>
		<div><img src="img/4.png" alt=""></div>
		<div><img src="img/5.png" alt=""></div>
		<div><img src="img/6.png" alt=""></div>
		<div><img src="img/7.png" alt=""></div>
		<div><img src="img/8.png" alt=""></div>
		<div><img src="img/9.png" alt=""></div>
		<div><img src="img/10.png" alt=""></div>
	</div>
</body>
</html>